<template>
	<view class="space_detail bgDefault">


		<tn-nav-bar fixed alpha customBack class="detail_nav">
			<view slot="back" class='custom-left' @click="goBack">
				<text class='tn-icon tn-icon-left icons'></text>
				<text class='desc'>精选空间</text>
			</view>

			<view slot="right" class='tn-custom-nav-bar__right' style="z-index: 99;">
				<text @tap="collectSpace" class='tn-icon tn-icon-like'
					:class="detail.favor?'tn-icon-like-fill colorFill':''" style="margin-right: 18rpx;"></text>
				<button class="share_btn" open-type="share" ><i class="tn-icon tn-icon-send"></i></button>
			</view>
		</tn-nav-bar>

		<view>
			<tn-swiper :height="swiperHeight" :list="list" radius="0"></tn-swiper>
		</view>

		<view class="space_title tn-radius10">
			<view class="title_left">
				<view class="title">{{detail.title}}</view>
				<view class="tap"></view>
			</view>
			
			<view class="title_right" @tap="trunMap()">
				<i class="tn-icon-location-fill icons"></i>
				<view>距离{{distance}}</view>
			</view>
			
			<!-- <view class="info">
				<view class="tn-float-left comments tn-radius10">
					<view class="title">
						<i class="tn-icon-star-fill icons"></i> {{parseFloat(detail.commentRate).toFixed(1)}}
						{{rateText(detail.commentRate)}}
						<span>{{detail.commentNumber}}条></span>
					</view>
					<view class="content">
						{{detail.lastComment.space_content || "暂无评论"}}
					</view>
				</view>
				<view class="tn-float-right address tn-radius10" @tap="trunMap()">
					<span>{{detail.address}}</span>
					<span class="map"><i class="tn-icon-location-fill icons"></i>地图</span>

				</view>
			</view> -->
		</view>

		<view class="house tn-radius10">
			<view class="title">
				<span>开放时间</span>
				<span>{{detail.start_time}}-{{detail.end_time}}</span>
			</view>
			<view class="map" v-if="detail.children && detail.children.length > 0">
				<view class="tips">房间选择</view>
				<tn-scroll-list :indicator="false">
					<view class="tn-flex" style="margin-top: 15rpx;">
						<block v-for="(item, index) in detail.children" :key="index">
							<view class="house_image ">
								<image @tap="selectHouse(item,index)" class="tn-radius10"
									:class="index==selectIndex?'active':''" :src="item.pic"></image>
							</view>
						</block>
					</view>
				</tn-scroll-list>
			</view>
		</view>

		<view class="comment tn-radius10">
			<view class="title">
				<span>客户评价</span>
				<span class="more" @tap="commentMore()">查看更多>></span>
			</view>

			<view class="tips">
				<span class="tj">客户推荐</span>
				<span>近三个月{{detail.lastCommentNumber}}人推荐并好评</span>
			</view>

			<view class="number">
				<view>
					<i class="tn-icon-star-fill star"></i>
					<span><span
							class="starNumber">{{parseFloat(detail.commentRate).toFixed(1)}}</span>{{rateText(detail.commentRate)}}</span>
				</view>
				<!-- <view class=""评分></view> -->
			</view>

			<view class="user_comment" v-if="detail.lastComment && detail.lastComment.created_at">
				<view class="userInfo">
					<image class="logo" :src="detail.lastComment.user.avatar"></image>
					<view class="info">
						<view class="nickname">{{detail.lastComment.user.nickname}}</view>
						<view class="desc">
							<span>{{detail.lastComment.created_at|parseTime('{y}-{m}-{d}')}}参加</span>
							<span class="star">
								<tn-rate activeColor="#ff0000" v-model="detail.lastComment.space_star" :size="24"
									:allowHalf="true" :disabled="true"></tn-rate>
							</span>
							<span class="tag tn-radius10">{{rateText(detail.lastComment.space_star)}}</span>
						</view>
					</view>
				</view>
				<view class="content">
					{{detail.lastComment.space_content}}
				</view>
			</view>
		</view>

		<view class="fujin tn-radius10">

			<view class="title">
				<span>附近更多空间</span>
				<span class="more">查看更多>></span>
			</view>

			<view class="map">
				<tn-scroll-list :indicator="false">
					<view class="tn-flex" style="margin-top: 15rpx;">
						<block v-for="(item, index) in nearList" :key="index">
							<view class="house_image ">
								<image @tap="spaceDetail(item)" class="tn-radius10" :src="item.pic"></image>
							</view>
						</block>
					</view>
				</tn-scroll-list>
			</view>
		</view>
		<TemplateLoading :active="loading"></TemplateLoading>
		<view style="margin-top: 140rpx;height: 1rpx;width: 100%;"></view>

		<view class="footer tn-flex">
			<view class="price">￥{{parseFloat(price).toFixed(2)}}/时起</view>
			<view class="order-btn tn-radius10" @tap="turnOrder">立即预约</view>
		</view>
	</view>
</template>

<script>
	import {
		detailObj,
		getNearSpace,
		getDistance
	} from '@/api/space/index.js'
	import TemplateLoading from '../components/loading.vue'
	import {
		checkLogin
	} from '@/util/common.js'
	import {
		subComment
	} from '@/api/user/index.js'
	import store from '@/store/index.js'
	export default {
		components: {
			TemplateLoading
		},
		data() {
			return {
				swiperHeight: 530,
				list: [],
				detail: {},
				selectIndex: 0,
				id: 0,
				distance:"未知",
				price: 0,
				loading: false,
				selectParam: {
					lat: '',
					lng: '',
					id: ''
				},
				nearList: [],
			}
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
				this.initData()
			}
			
			if(e.pid){
				uni.setStorageSync("pid", e.pid)
			}

			this.getNearSpace()
			this.getDistanceObj()
		},
		onShareAppMessage() {
			
			var pid = 0;
			var userInfo = store.state?.vuex_user
			if(userInfo.token){
				pid = userInfo.token.split("-")[0]
			}
			
			return {
				title:this.detail.title,
				path:"/pages/space/detail?id="+this.id+"&pid="+pid,
				imageUrl:this.detail.pic
			}
		},
		methods: {
			spaceDetail(item) {
				uni.navigateTo({
					url: '/pages/space/detail?id=' + item.id
				})
			},
			rateText(rate) {
				if (rate > 4.5) return "超预期";
				if (rate > 3.5) return "非常好";
				if (rate > 2) return "一般般";
				return "体验很差";
			},
			goBack() {
				// 返回上一页
				uni.navigateBack({
					delta: 1
				});
			},
			collectSpace() {
				if (checkLogin()) {
					subComment({
						type: 1,
						id: this.detail.id
					}).then(res => {
						uni.showToast({
							icon: "none",
							title: (this.detail.favor == 1 ? '取消' : '收藏') + '成功'
						})

						this.detail.favor = this.detail.favor == 1 ? 0 : 1
					})
				}
			},

			shareSpace() {
				console.log("##############")
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: this.detail.title || "布芒的家",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			getDistanceObj(){
				var _t = this
				uni.getLocation({
					success: function(res) {
						_t.getDistanceO(res.latitude,res.longitude)
					},
					fail(err) {
						console.log(err)
						_t.getDistanceO()
					},
				});
			},
			getDistanceO(lat,lng){
				getDistance({id:this.id,lat:lat,lng:lng}).then(res=>{
					this.distance = res
				})
			},
			initData() {
				this.loading = true
				detailObj({
					id: this.id
				}).then(res => {
					this.loading = false
					this.detail = res
					var imgs = res.pics.split(",")
					imgs.map(re => {
						this.list.push({
							image: re,
							name: ""
						})
					})

					this.price = res.children.length > 0 ? res.children[0].price : res.price
				}, err => {
					this.loading = false
				})
			},
			selectHouse(item, index) {
				this.selectIndex = index
				this.price = item.price
			},
			trunMap() {
				uni.navigateTo({
					url: '/pages/space/map?title=' + this.detail.title + '&lat=' + this.detail.lat + '&lng=' + this
						.detail.lng
				})
			},
			turnOrder() {
				if (checkLogin()) {
					let _id = this.id
					if (this.detail.children.length > 0) {
						_id = this.detail.children[this.selectIndex].id
					}
					uni.navigateTo({
						url: '/pages/order/confirm/space?id=' + _id
					})
				}
			},
			getNearSpace() {
				var _t = this
				uni.getLocation({
					success: function(res) {
						_t.selectParam.lat = res.latitude
						_t.selectParam.lng = res.longitude
						_t.selectData()
					},
					fail(err) {
						console.log(err)
						_t.selectData()
					},
				});

			},
			selectData() {
				this.selectParam.id = this.id
				getNearSpace(this.selectParam).then(res => {
					this.nearList = res
				})
			},
			commentMore() {
				uni.navigateTo({
					url: '/pages/space/comment?id=' + this.detail.id + '&type=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgDefault {
		background: $tn-main-bg;
		height: 100vh;

		.index_content {
			padding: 0 7%;
		}
	}

	.detail_nav {
		color: #fff;
		color: #fff;
		font-size: 42rpx;

		.custom-left {
			padding-left: 18rpx;
			width: 231rpx;
			background: rgba(0, 0, 0, 0.6);
			border-top-right-radius: 20%;
			border-bottom-right-radius: 20%;

			.icons {
				display: inline;
				font-size: 27rpx;
			}

			.desc {
				line-height: 32px;
				margin-left: 34rpx;
				padding: 0 18rpx;
				border-left: 1px solid #999999;
				text-align: center;
				font-size: 24rpx;
			}
		}

	}


	.tn-radius10 {
		border-radius: 10rpx;
	}

	.space_title {
		height: 121rpx;
		background: #fff;
		width: 100%;
		padding: 30rpx 42rpx;
		display: flex;
		justify-content: space-between;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #333;
		}
		
		.title_right{
			color: #aadeed;
			font-size: 24rpx;
			
			.icons{font-size: 50rpx;}
		}

		.tap {
			background: url("https://www.zztengma.com/lihu/bumang/images/space_title_tap.png") no-repeat;
			background-position: left bottom;
			height: 31rpx;
			background-size: contain;
		}
		
		

		.info {
			margin-top: 15rpx;

			.comments {
				padding: 15rpx 7rpx;
				background: #ffc19d;
				height: 140rpx;
				width: 29%;

				.icons {
					color: #ff0000;
					display: inline;
				}

				.title {
					display: flex;
					justify-content: space-between;
					line-height: 23rpx;
					font-size: 21rpx;
					font-weight: bold;
					color: #000;

					span {
						font-size: 15rpx;
						color: #666;
					}
				}

				.content {
					margin-top: 10rpx;
					font-size: 18rpx;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
			}

			.address {
				color: #333;
				position: relative;
				padding: 15rpx 7rpx;
				font-size: 22rpx;
				background: #ffc19d;
				height: 140rpx;
				width: 68%;

				.icons {
					color: #ff6708;
					font-size: 32rpx;
					display: block;
					margin-bottom: 7rpx;
				}

				.map {
					color: #ff6708;
					position: absolute;
					bottom: 29rpx;
					right: 37rpx;
					font-size: 12rpx;
					font-weight: bold;
					text-align: center;
				}
			}
		}
	}

	.house {
		margin-top: 19rpx;
		background: #fff;
		width: 100%;
		padding: 30rpx 52rpx;
		//height: 336rpx;

		.title {
			font-weight: bold;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #d6d6d6;
		}

		.map {
			margin-top: 21rpx;

			.tips {
				font-size: 18rpx;
			}
		}
	}

	.house_image {
		width: 281rpx;
		height: 176rpx;
		margin-right: 15rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.active {
			border: 5rpx solid $tn-main-orange;
		}
	}

	.colorFill {
		color: $tn-main-orange;
		;
	}

	.fujin {
		margin-top: 19rpx;
		background: #fff;
		width: 100%;
		padding: 30rpx 52rpx;
		overflow: hidden;

		.title {
			font-weight: bold;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			padding-bottom: 24rpx;

			.more {
				color: #666;
				font-size: 20rpx;
			}
		}
	}

	.comment {
		margin-top: 19rpx;
		background: #fff;
		width: 100%;
		padding: 30rpx 52rpx;
		overflow: hidden;

		.title {
			font-weight: bold;
			font-size: 14px;
			display: flex;
			justify-content: space-between;

			.more {
				color: #666;
				font-size: 20rpx;
			}
		}

		.tips {
			line-height: 52rpx;
			font-size: 12px;
			color: #666;

			.tj {
				color: $tn-main-orange;
				margin-right: 29rpx;
				font-size: 13px;
			}
		}

		.number {
			.star {
				color: #ff0000;
				display: inline;
				font-size: 36rpx;
				margin-right: 24rpx;
			}

			span {
				line-height: 72rpx;
				font-size: 24rpx;

				.starNumber {
					font-size: 36rpx;
				}
			}
		}

		.user_comment {
			margin-bottom: 12px;

			.userInfo {
				.logo {
					width: 36px;
					height: 36px;
					float: left;
					border-radius: 50%;
					margin-right: 17rpx;
				}

				.info {
					.nickname {
						font-size: 14px;
						color: #333;
						line-height: 23px;
					}

					.desc {
						font-size: 12px;
						color: #666;

						.star {
							color: #ff0000;
							display: inline;
							font-size: 12px;
							margin-left: 5rpx;
							margin-right: 5rpx;
						}

						.tag {
							background-color: $tn-main-orange;
							color: #fff;
							padding: 1rpx 8rpx;
							font-size: 12px;
						}
					}
				}
			}

		}

		.content {
			font-size: 12px;
			margin-top: 6px;
			color: #666;
			line-height: 18px;
		}
	}

	.footer {
		padding: 18rpx 55rpx 26rpx;
		font-size: 36rpx;
		bottom: 0;
		width: 100%;
		display: flex;
		position: fixed;
		background: #fff;
		justify-content: space-between;
		color: $tn-main-orange;

		.order-btn {
			color: #fff;
			font-size: 32rpx;
			background: $tn-main-orange;
			padding: 8rpx 12rpx;
		}
	}
	
  .share_btn{    background: none;
    line-height: 15px;
	font-size: 21px;
    padding: 0!important 3rpx 3rpx;
    display: inline-block;
	position: sticky;
	color: #FFFFFF;
}
</style>